package com.shenzhenai.jetpackcomposelayouts

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.layout.layout
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.shenzhenai.jetpackcomposelayouts.ui.theme.DN_Compose_LearnTheme

/**
 * @author huangzehui
 * @date 30/7/2025 下午9:08 周三
 * @description 自定义布局 - 使用修饰符
 */
/**
 * 拓展的基线方法
 */
fun Modifier.firstBaseLineToTop(firstBaseLineToTop: Dp) = this.then(
    // 使用 layout 来修改元素的测量和布局方式
    // measurable 可测量的元素信息
    // constraints 约束条件
    layout { measurable, constraints ->

        // 测量元素
        val placeable = measurable.measure(constraints)

        // 测试之后，可以获取元素的baseline的值（就是文字的底部，距离文字控件顶部的距离）
        val firstBaseLine = placeable[FirstBaseline]

        // 元素新的Y坐标 = 新基线值 - 旧基线值
        // firstBaseLineToTop.roundToPx()：将新的基线值转为px
        val placeableY = firstBaseLineToTop.roundToPx() - firstBaseLine

        // 新的高度 = 原来的高度，加上新的Y坐标
        val height = placeable.height + placeableY

        layout(placeable.width, height) {
            // 设置元素的位置
            placeable.place(0, placeableY)
        }
    }
)


@Composable
fun TextWithPaddingToBaseline() {
    DN_Compose_LearnTheme {
        Scaffold { innerPadding ->
//            Text(
//                text = "Hi there!", modifier = Modifier
//                    .padding(innerPadding)
//                    .padding(24.dp)
//                    .background(Color.Red)
//            )


            Text(
                text = "Hi there!", modifier = Modifier
//                    .padding(innerPadding)
                    .firstBaseLineToTop(innerPadding.calculateTopPadding() + 24.dp)
                    .background(Color.Red)
            )
        }
    }
}